<template>
	<view class="login-container">
		<view class="nav-back" @click="goBack">
			<uni-icons type="back" size="20" color="#333"></uni-icons>
		</view>

		<view class="logo-box">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="title">欢迎登录</text>
		</view>

		<view class="form-box">
			<view class="input-box">
				<uni-icons type="person" size="20" color="#999"></uni-icons>
				<input 
					type="number" 
					v-model="phone" 
					maxlength="11" 
					placeholder="请输入手机号"
					@input="validatePhone"
				/>
			</view>
			
			<view class="input-box">
				<uni-icons type="locked" size="20" color="#999"></uni-icons>
				<input 
					type="number" 
					v-model="code" 
					maxlength="6" 
					placeholder="请输入验证码"
				/>
				<text 
					class="code-btn" 
					:class="{'disabled': !canSendCode || counting}"
					@click="sendCode"
				>
					{{counting ? `${countdown}s后重试` : '获取验证码'}}
				</text>
			</view>

			<button 
				class="login-btn" 
				:class="{'active': canLogin}"
				@click="handleLogin"
			>
				登录
			</button>

			<view class="agreement">
				<checkbox :checked="agreed" @click="agreed = !agreed" color="#007AFF"/>
				<text class="agreement-text">
					登录即代表您已同意
					<text class="link" @click="showAgreement('user')">《用户协议》</text>
					和
					<text class="link" @click="showAgreement('privacy')">《隐私政策》</text>
				</text>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api'

export default {
	data() {
		return {
			phone: '',
			code: '',
			agreed: false,
			counting: false,
			countdown: 60,
			timer: null,
			canSendCode: false
		}
	},
	
	computed: {
		canLogin() {
			return this.phone.length === 11 && this.code.length === 6 && this.agreed
		}
	},
	
	onUnload() {
		// 页面卸载时清除定时器
		if (this.timer) {
			clearInterval(this.timer)
		}
	},
	
	methods: {
		// 验证手机号
		validatePhone() {
			const phoneReg = /^1[3-9]\d{9}$/
			this.canSendCode = phoneReg.test(this.phone)
		},
		
		// 发送验证码
		sendCode() {
			if (!this.canSendCode || this.counting) return
			
			api.user.sendCode(this.phone).then(() => {
				this.startCountdown()
				uni.showToast({
					title: '验证码已发送',
					icon: 'none'
				})
			})
		},
		
		// 开始倒计时
		startCountdown() {
			this.counting = true
			this.countdown = 60
			this.timer = setInterval(() => {
				if (this.countdown > 0) {
					this.countdown--
				} else {
					this.counting = false
					clearInterval(this.timer)
				}
			}, 1000)
		},
		
		// 处理登录
		handleLogin() {
			if (!this.canLogin) return
			
			//暂时不走接口
			// api.user.login({
			// 	phone: this.phone,
			// 	code: this.code
			// }).then(res => {

			// })

			//res.data.token
			uni.setStorageSync('token', "mock-token")
			uni.showToast({
				title: '登录成功',
				icon: 'success'
			})
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/tabbar/tabbar-user/tabbar-user'
				})
			}, 1500)
		},
		
		// 显示协议
		showAgreement(type) {
			const title = type === 'user' ? '用户协议' : '隐私政策'
			uni.navigateTo({
				url: `/pages/agreement/index?type=${type}&title=${title}`
			})
		},
		
		// 添加返回方法
		goBack() {
			uni.switchTab({
				url: '/pages/tabbar/tabbar-home/tabbar-home'  // 返回首页
			})
		}
	}
}
</script>

<style lang="scss">
.login-container {
	padding: 60rpx 40rpx;
	position: relative;  // 添加相对定位
	
	// 添加返回按钮样式
	.nav-back {
		position: fixed;
		left: 30rpx;
		top: 60rpx;
		z-index: 100;
		padding: 20rpx;
	}
	
	.logo-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 80rpx;
		
		.logo {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 20rpx;
		}
		
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.form-box {
		.input-box {
			display: flex;
			align-items: center;
			height: 100rpx;
			padding: 0 30rpx;
			background-color: #f8f8f8;
			border-radius: 50rpx;
			margin-bottom: 30rpx;
			
			input {
				flex: 1;
				margin-left: 20rpx;
				font-size: 28rpx;
			}
			
			.code-btn {
				font-size: 26rpx;
				color: #007AFF;
				padding-left: 20rpx;
				border-left: 1px solid #ddd;
				
				&.disabled {
					color: #999;
				}
			}
		}
		
		.login-btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background-color: #e0e0e0;
			color: #fff;
			border-radius: 45rpx;
			margin: 40rpx 0;
			font-size: 32rpx;
			
			&.active {
				background-color: #007AFF;
			}
		}
		
		.agreement {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #666;
			
			.agreement-text {
				margin-left: 10rpx;
			}
			
			.link {
				color: #007AFF;
			}
		}
	}
}
</style> 